<template>
	<view class="con">
		<image src="@/static/hBg.png"></image>
		<uni-card  v-if="radiolist != null">
			<view class="flex">
				<u--text text="维修方式" style='width: 200rpx;'></u--text>
				<radio-group @change="radioChange" style="width: 400rpx;">
					<block v-for="item in radiolist" :key="item.dictCode">
						<radio :value="item.dictValue" :checked="form.radio == item.dictValue" />
						{{item.dictLabel}}</label>
					</block>
				</radio-group>
			</view>
		</uni-card>

		<view>
			<uni-card title="客户信息">
				<view class="flex v_center">
					<uni-tag :mark="true" text="车主姓名" type="primary" />
					<u--input v-model="form.name" placeholder="请输入姓名" clearable></u--input>
				</view>

				<view class="flex v_center up_top">
					<uni-tag :mark="true" text="联系方式" type="primary" />
					<u--input type="number" v-model="form.phone" placeholder="请输入联系方式" clearable></u--input>
				</view>

				<view class="flex v_center up_top">
					<uni-tag :mark="true" text="预约时间" type="primary" />
					<view style="width: 440rpx;">
						<u-button @click="show=true">{{form.subscribeTime?form.subscribeTime:'<请选择预约时间>'}}</u-button>
					</view>
				</view>
				<u-datetime-picker :show="show" v-model="date" mode="datetime" @close="close" @cancel="close"
					@confirm="confirm" :closeOnClickOverlay="true" :minDate="Number(new Date())"></u-datetime-picker>

				<view class="flex v_center up_top" v-if="form.radio == 0">
					<uni-tag :mark="true" text="取车位置" type="primary" />
					<u--input v-model="form.address" placeholder="请输入取车位置" clearable></u--input>
				</view>
			</uni-card>
			<uni-card title="车辆信息" style="overflow: visible">
				<view class="flex v_center up_top">
					<uni-tag :mark="true" text="车辆类型" type="primary" />
					<view style="width: 350rpx;display: flex;justify-content: center;">
						<view style="width: 200rpx;text-align: center; overflow: visible;">
							<uni-data-select v-model="form.carId" :localdata="carList"
								@change="change"></uni-data-select>
						</view>
					</view>
				</view>
				<view class="flex v_center up_top">
					<uni-tag :mark="true" text="车牌号" type="primary" />
					<view style="width: 330rpx; text-align: center; color:#0000ff;">{{carNumber?carNumber:'未选择'}}</view>
				</view>
			</uni-card>

			<uni-card title="照片">
				<uni-file-picker v-model='image' title="整车照片" fileMediatype="image" :limit="1" @select="select"
					@delete="deleteImg" />
				<uni-file-picker title="维修部位照片" fileMediatype="image" @select="selectList" @delete="deleteImgList" />
			</uni-card>
		</view>

		<button @click="submit" class="up_bottom btn-grad" type="primary" shape="circle"
			style="width: 600rpx;">提交</button>

		<view style="height: 10rpx;"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				date:Number(new Date()),
				form: {
					id: 0,
					userId: 0, //用户id
					carId: 0, //车辆id
					type: null, //维修方式
					phone: null, //联系方式
					radio: 0,
					address: '', //维修地址
					subscribeTime: null, //预约时间
					state: '', //维修状态（未到场）
					photo: null, //整车照片
					photoList: [],
					name: null
				},
				type: null,
				//>>>>>>>>>> 汽车信息<<<<<<<<<<<
				carTypeList: [],
				carList: [],
				carNumber: null,
				//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
				bg: '/static/hBg.png',
				radiolist: null,
				// <<<<<<<<照片>>>>>>>>>>>
				imgs: [],
				image: []
			}
		},
		onLoad(e) {
			console.log(e)
			if (e.form != null) {
				let form = JSON.parse(e.form)
				this.form.id = form.id
				this.type = form.type
			}
			// 获取用户id
			this.form.userId = uni.getStorageSync('userId')
			// 
			this.getCarList()
			this.getMaintainTypeList()
			console.log(this.form)
			// 
		},
		methods: {
			// 选择日期
			close(){
				this.show = false
			},
			confirm(){
				let date = new Date(this.date)
				this.form.subscribeTime = date.getFullYear()+'-'
				+(date.getMonth()+1)+'-'
				+date.getDate()+' '
				+date.getHours()+':'+
				+date.getMinutes()+':00'
				this.show = false
				console.log(this.form.subscribeTime)
			},
			// 图片上传
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
				this.selectPhoto(e.tempFilePaths[0], false)
			},
			selectList(e) {
				console.log('选择文件：', e)
				this.selectPhoto(e.tempFilePaths[0], true)
			},
			deleteImg(e) {
				// console.log(e)
				this.form.photo = null
				console.log(this.form.photo)
			},
			deleteImgList(e) {
				// console.log(e)
				this.form.photoList.splice(e.index, 1)
				console.log(this.form.photoList)
			},
			selectPhoto(path, isList) {
				let that = this
				uni.uploadFile({
					url: '/api/file/upload',
					filePath: path,
					name: 'file',
					success(res) {
						let data = JSON.parse(res.data)
						console.log(data)
						if (data.code == 200) {
							if (isList) {
								that.form.photoList.push(data.data.url)
							} else {
								that.form.photo = data.data.url
							}
							console.log('添加照片:')
							console.log(that.form)
						}
					}
				})
			},
			// 车辆类型选择器改变方法
			change(e) {
				console.log(e)
				for (let i of this.carList) {
					if (i.id == e) {
						this.carNumber = i.carNumber
						this.form.carId = e
						break;
					}
				}
			},
			radioChange(val) {
				if (val != null && val.target != null) {
					this.form.radio = val.target.value
					// 维修方式
					this.form.type = val.target.value
				}
				// console.log(val);
				// console.log(this.form)
			},
			// 提交表单
			submit() {
				console.log(this.form);
				this.showToast(this.form.phone, '联系方式')
				this.showToast(this.form.subscribeTime, '预约时间')
				if (this.form.type == 0) {
					this.showToast(this.form.address, '取车位置')
				}
				this.showToast(this.form.carId, '车辆信息')
				this.add()
			},
			add() {
				let that = this
				this.$http({
					url: '/api/repair/maintain',
					method: 'POST',
					data: that.form,
					success(res) {
						console.log(res.data)
						if (res.data.code == 200) {
							let form = {}
							form.id = res.data.data
							form.type = that.type
							console.log(form)
							// 跳转维修预约成功
							uni.navigateTo({
								url: '/pages/yunRang/carMaintainReservation/cmr_success/cmr_success?form=' +
									JSON.stringify(form)
							})
						} else {
							uni.showToast({
								title: '提交失败',
								type: 'error'
							})
						}
					},
					fail() {
						uni.showToast({
							title: '提交失败',
							type: 'error'
						})
					}
				})
			},
			showToast(item, title) {
				if (item == null || item == '') {
					uni.showToast({
						title: '请确定' + title + '！',
						type: 'error'
					})
				}
			},
			// 获取汽车列表
			getCarList() {
				this.getCarTypeList()
				let that = this
				this.$http({
					url: '/api/user/car/list',
					data: {
						userId: that.form.userId
					},
					method: 'GET',
					success(res) {
						console.log(res.data)
						that.carList = res.data.rows
						for (let i of that.carList) {
							i.value = i.id
							for (let j of that.carTypeList) {
								if (j.dictValue == i.carType) {
									// 添加列表
									i.text = j.dictLabel
									break
								}
							}
						}
						console.log(that.carList)
					}
				})
			},
			// 获取汽车类型
			getCarTypeList() {
				let that = this
				this.$http({
					url: '/api/system/dict/data/type/car_type',
					method: 'GET',
					success(res) {
						console.log(res.data)
						that.carTypeList = res.data.data
					}
				})
			},
			// 获取修理方式列表
			getMaintainTypeList() {
				let that = this
				this.$http({
					url: '/api/system/dict/data/type/maintain_type',
					method: 'GET',
					success(res) {
						console.log(res.data)
						that.radiolist = res.data.data
					}
				})
			}


		}
	}
</script>

<style scoped lang="scss">
	.con {
		// background-image: url(/static/hBg.png);

	}

	image {
		position: absolute;
		z-index: 0;
		width: 100%;
		margin-top: -50rpx;
	}

	input {
		padding: 5rpx 10rpx;

		width: 400rpx;
		border: 2rpx gray solid;
		border-radius: 20rpx;
	}

	.flex {
		display: flex;
	}

	.space_around {
		justify-content: space-around;
	}

	.v_center {
		align-items: center;
	}

	.up_top {
		margin-top: 20rpx;
	}

	.up_bottom {
		margin-bottom: 50rpx;
	}

	// 按钮
	// >>>>>>>>>>>>>>>>>>>>>>>>>>
	.btn-grad {
		width: 500rpx;
		height: 100rpx;
		border-radius: 50rpx;
		color: #55aaff;

		background-image: linear-gradient(to right, #1A2980 0%, #26D0CE 51%, #1A2980 100%)
	}

	.btn-grad {
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		box-shadow: 0 0 20px #eee;
		display: block;
	}

	.btn-grad:hover {
		background-position: right center;
		color: #0055ff;
		text-decoration: none;
	}

	// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<


	.uni-tag {
		height: 35rpx;
		margin-right: 20rpx;

		width: 120rpx;
	}
</style>